// 由于需要大量用到上下文中的方法和属性

// 所以，setup函数一定要定义为function
export default function() {
	const { $ref, $reactive, $val } = $modules;
	// 定义一个多层的响应式对象，并观察到最底层
	const school = $reactive({
		schoolName: '实验中学',
		students: [{ name: '明明', age: 16 }]
	}, 2);


	this.add(
		this.render({
			// 同样对school进行观察
			children: $val(school, {
				// 注意，这里没有指定field，则对user整体观察
				// 即user中的说有层级变化均被观察到
				// 同样这里的形参就是观察到的user值
				done: val => {
					const { schoolName, students } = val;
					const { name, age } = students[0];
					return `${name}今年${age}岁,是${schoolName}的学生`
				}
			}),
			// 点击试试
			onClick: () => {
				school.students[0].age += 1;
			}
		})
	)
}